<template>
  <div class="myCategory" :class="show ? 'show' : ''">
    <!-- 顶部通栏 -->

    <div class="box center">
      <div class="image">
        <img src="@/assets/images/logo.png" alt="" />
      </div>
      <ul class="category">
        <li>
          <router-link
            to="/"
            :class="{ name: true, active: $route.path=='/' }"
            @click="activeHandle('all')"
            >首页</router-link
          >
        </li>
        <li
          v-for="(item, index) in category"
          :key="item.id"
          @mouseenter.self="mouseenterHandle(index)"
          @mouseleave="currentIndex = -1"
        >
          <router-link
            :to="'/category/' + item.id"
            :class="{ name: true, active: $route.params.id == item.id }"
            @click="activeHandle(item.name)"
            >{{ item.name }}</router-link
          >
          <div
            :class="{ layer: true, open: currentIndex == index }"
            v-if="flag"
          >
            <ul>
              <li v-for="items in item.children" :key="items.id">
                <router-link :to="'/category/sub/' + items.id"></router-link>
                <img src="" v-lazyload="items.picture" alt="" />
                <p>{{ items.name }}</p>
              </li>
            </ul>
          </div>
        </li>
      </ul>
      <div class="right">
        <router-link class="blacks" to="/">品牌</router-link>
        <router-link class="blacks" to="/">专题</router-link>
      </div>
    </div>
  </div>
</template>
<script>
import { getCateGory } from "@/api/home/cate";
import { ref, reactive, toRefs, computed, onBeforeUnmount } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    category: {
      type: Array,
      default: [],
    },
    currentName: {
      type: String,
      default: "",
    },
  },
  name: "myCategory",
  setup(props, ctx) {
    /* 定义仓库 */
    const store = useStore();
    /* 定义路由传参 */
    const router = useRouter();
    /* 定义路由收参 */
    const route = useRoute();
    /* 定义总数据存放地址 */
    const data = reactive({
      searchVal: "",
      currentIndex: -1,

      flag: false,
      mouseenterHandle: (index) => {
        data.flag = true;
        data.currentIndex = index;
      },
      activeHandle: (name) => {
        data.flag = false;
        window.scrollTo({
          top: 0,
          behavior: "auto",
        });
        ctx.emit("currentNameChange", name);
      },
    });

    return {
      ...toRefs(data),
    };
  },
  components: {},
};
</script>
<style lang="scss" scoped>
/* 如果不想样式污染  就加个scoped */
.myCategory {

  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999;
  background-color: #fff;
  transition: all 0.5s;
  .box {
    width: 1240px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    .right {
      flex: 1;
      border-left: 1px solid var(--color);
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-left: 20px;
      padding: 0 40px;
    }
  }
  &.show {
    transform: translateY(0);
  }
  .image {
    width: 200px;
  }
  .category {
    width: 820px;
    display: flex;
    justify-content: space-around;
    padding-left: 40px;
    position: relative;
    z-index: 999;
    li {
      .name {
        cursor: pointer;
        color: #000;
        &:hover {
          color: var(--color);
        }
        &.active {
          color: var(--color);
        }
      }
      .layer {
        width: 1240px;
        background-color: #fff;
        position: absolute;
        left: -200px;
        top: 50px;
        height: 0;
        overflow: hidden;
        opacity: 0;
        box-shadow: 0 0 5px #ccc;
        transition: all 0.2s;
        ul {
          display: flex;
          height: 100%;
          align-items: center;
          li {
            padding: 20px;
            text-align: center;
            font-size: 0;
            position: relative;
            a {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
            }
            &:hover {
              color: var(--color);
              cursor: pointer;
            }
            p {
              font-size: 14px !important;
            }
            img {
              width: 100px;
            }
          }
        }
      }
      .open {
        height: 160px;
        opacity: 1;
      }
    }
  }
}
</style>